<template>
	<view>
		<!-- #ifndef APP-PLUS -->
		<view class="video">
			<video id="myVideo" :src="videoData" controls>
			</video>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="video">
			<video class="videoData" :src="videoData" controls></video>
		</view>
		<!-- #endif -->
		<view class="bottom-tab">
			<view>
				<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
					swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
					<scroll-view scroll-y style="height: 900rpx;padding: 10rpx 20rpx;width: 100%;">
						<view v-if="index==0">
							<view class="list" v-for="(item,index) in studyData" :key="item.sectionId">
								<view class="big-title">
									{{item.sectionName}}
								</view>
								<view class="small-title" v-for="(v,i) in item.subSections" :key="v.sectionId">
									<view :class="['left-title-content',sectionData==v.sectionId?'red':'']" @click="study(v.sectionId)">
										<image :src="sectionData==v.sectionId?'../../static/images/live-act.png':'../../static/images/live.png'" mode="widthFix"></image>
										<view class="list-time">200-1</view>
										<view class="small-contnet">{{v.sectionName}}</view>
									</view>
									<text :class="sectionData==v.sectionId?'red':''">(28分钟)</text>
								</view>
							</view>
						</view>
						<view v-if="index==1">
							<view class="second-tab">
								<view class="little-title">
									简介
								</view>
								<view>
									<rich-text :nodes="title.courseDetail"></rich-text>
								</view>
							</view>
						</view>
						<view v-if="index==2">
							暂无
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		getGet
	} from "../../api/index.js"
	export default {
		data() {
			return {
				sectionData:"",//
				detailData:"",
				title: "",
				studyData: "",
				videoData: "",
				list: [{
					name: '章节'
				}, {
					name: '详情'
				}, {
					name: '评价'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				tabs: [1, 2, 3]
			};
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			study(data) {
				console.log(data)
				uni.redirectTo({
					url: `../studyDetail/studyDetail?classid=${this.detailData}&videoid=${data}`
				})
			},
		},
		onLoad(e) {
			this.detailData=e.classid
			this.sectionData=e.videoid
			console.log(e.videoid)
			getGet(`/weChat/applet/course/switch/section/${e.videoid}`).then(res => {
				// console.log(111)
				// console.log(res.data.section.file.fileUrl)
				this.videoData = res.data.section.file.fileUrl
			})
			// getGet("/pcUser/login-user/info").then(res => {
			// 	console.log(res)
			// 	if (res.data.code == 0) {
			// 		getGet(`/weChat/applet/course/switch/section/${e.videoid}`).then(res => {
			// 			console.log(res.data.section)
			// 			this.videoData=res.data.section.file.fileUrl
			// 		})
			// 	} else {
			// 		uni.redirectTo({
			// 			url: "../login/login"
			// 		})
			// 	}
			// })
			// console.log(e.id)
			getGet(`/pc/course/detail/${e.classid}`).then(res => {
				console.log(res.data.data)
				this.title = res.data.data
				this.studyData = res.data.data.sections
			})
		}
	}
</script>

<style lang="less">
	// .video{
	// 	width: 100vh;
	// }
	#myVideo {
		width: 100%;
	}

	.big-title {
		font-size: 35rpx;
		font-weight: bold;
		margin: 20rpx 0;
	}

	.small-title {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 10rpx 20rpx;

		image {
			width: 25rpx;
		}
	}

	.list-time {
		width: 100rpx;
		margin: 0 15rpx;
	}

	.small-contnet {
		margin: 15rpx 0;
		display: block;
		width: 400rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.left-title-content {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.swiper-box {
		height: 900rpx;
	}

	.little-title {
		margin-bottom: 20rpx;
		font-size: 35rpx;
		font-weight: bolder;
	}

	.second-tab {
		padding: 20rpx;
	}

	.video {
		width: 100%;
		height: 400rpx;
		// border: 1px solid red;
	}

	.videoData {
		width: 100%;
		height: 100%;
	}

	.bottom-tab {
		padding-top: 35rpx;
	}
	.red{
		color: red;
	}
</style>
